<template>
  <div class="flexColumn" style="overflow-y: scroll;margin-top: 60px">
    <el-card class="box-card card flexColumn" style="height: 150px;flex-shrink: 0;margin-top: -70px">
      <span class="mText">线上访问统计</span>
      <el-row style="margin-top: 20px">
        <el-col :span="8">
          <div class="flexColumn" style="align-items: center">
            <span class="lText" style="margin-bottom: 10px">{{ log.todayApiTimes }}</span>
            <span class="sText">今日接口调用数</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="flexColumn" style="align-items: center">
            <span class="lText" style="margin-bottom: 10px">{{ log.yesterdayApiTimes }}</span>
            <span class="sText">昨日接口调用数</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="flexColumn" style="align-items: center">
            <span class="lText" style="margin-bottom: 10px">{{ log.totalApiTimes }}</span>
            <span class="sText">总接口调用数</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row style="margin-top: 20px">
      <el-col style="padding-right: 10px" :span="12">
        <el-card class="box-card card flexColumn">
          <div ref="chart1" style="height: 360px"></div>
          <div style="color: var(--deepText);font-size: 20px;position: absolute;left: 18%;bottom: 20px">近日接口调用分布</div>
        </el-card>
      </el-col>
      <el-col style="padding-left: 10px" :span="12">
        <el-card class="box-card card flexColumn">
          <div ref="chart2" style="height: 360px"></div>
          <div style="color: var(--deepText);font-size: 20px;position: absolute;left: 68%;bottom: 20px">近日接口调用数趋势</div>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="box-card card flexColumn specialCard" style="margin-top: 20px;flex-shrink: 0">
      <div class="flexRow" style="margin-bottom: 30px">
        <span class="mText">具体日志记录</span>
        <svg @click="exportRecords" style="margin-left: 20px" t="1697590550353" class="icon export"
             viewBox="0 0 1201 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4116" width="30" height="30">
          <path
              d="M399.257391 938.261011H88.553242V85.488174H1064.686376V255.940367a40.949476 40.949476 0 0 0 44.020686 42.485082 40.949476 40.949476 0 0 0 44.532555-42.485082V85.488174A87.529505 87.529505 0 0 0 1064.686376 0.006142H88.553242A87.529505 87.529505 0 0 0 0 85.488174v852.772837A87.529505 87.529505 0 0 0 88.553242 1023.743042H399.257391a42.99695 42.99695 0 1 0 0-85.482031z m358.307915-640.859299a40.437608 40.437608 0 0 0-45.556292-41.461345h-445.325552a41.973213 41.973213 0 1 0 0 83.434558h445.325552a40.949476 40.949476 0 0 0 44.532555-41.973213zM266.683462 470.413248a41.461344 41.461344 0 1 0 0 82.922689h223.174644a41.461344 41.461344 0 1 0 0-82.922689zM952.075317 351.147899a40.949476 40.949476 0 0 1 41.461344 40.949476v480.644474l135.645139-131.038323a41.973213 41.973213 0 0 1 70.637846 17.915396 41.461344 41.461344 0 0 1-11.261106 39.925739l-204.747379 200.140564a41.973213 41.973213 0 0 1-58.353004 0l-204.74738-200.140564a40.949476 40.949476 0 0 1-11.772974-39.925739 41.973213 41.973213 0 0 1 30.200239-28.664633 40.949476 40.949476 0 0 1 40.437607 10.749237l135.645139 131.038323V392.097375a41.461344 41.461344 0 0 1 41.973213-40.949476z m-460.681605 333.226361a41.973213 41.973213 0 1 1 0 83.434557H266.683462a41.973213 41.973213 0 1 1 0-83.434557z"
              fill="currentColor" p-id="4117"></path>
        </svg>
        <div style="margin-left: auto">
          <el-input
              class="input"
              suffix-icon="el-icon-search"
              v-model="keyword"
              clearable
              @keydown.enter.native="search"
          />
          <el-dropdown @click="search()" size="large" split-button trigger="click" @command="handleClick">
            <span style="color: var(--btnText)">{{ btnWord }}</span>
            <el-dropdown-menu ref="dropdown" slot="dropdown" :append-to-body="false"
                              style="background-color: var(--lightBg)!important;border: none">
              <el-dropdown-item command="desc_function">根据接口描述搜索</el-dropdown-item>
              <el-dropdown-item command="user_id">根据调用用户搜索</el-dropdown-item>
              <el-dropdown-item command="create_date">根据调用日期搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div ref="here"></div>
      </div>
      <el-table
          :data="logList"
          :header-cell-style="{
                height: '40px'
              }"
          :row-style="{height: '62px'}">
        <el-table-column width="10px"/>
        <el-table-column
            prop="descFunction"
            label="接口描述">
        </el-table-column>
        <el-table-column
            prop="times"
            label="调用次数">
        </el-table-column>
        <el-table-column
            label="调用用户">
          <template slot-scope="scope">
            <span v-if="scope.row.user && scope.row.user.name">
              {{scope.row.user.name}}
            </span>
            <span v-else>未知用户</span>
          </template>
        </el-table-column>
        <el-table-column label="所属关系">
          <template slot-scope="scope">
            <span v-if="scope.row.elders && scope.row.elders.length!==0">
              <span v-for="elder in scope.row.elders" :key="elder.elderlyId"
                    style="font-size: 15px">{{ elder.elderlyName }} </span>
              <span>的家属</span>
            </span>
            <span v-else>暂无所属关系</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="调用日期">
        </el-table-column>
      </el-table>
      <el-pagination
          style="text-align: center;margin-top: 20px"
          background
          layout="prev, pager, next"
          :total="total"
          :pager-count="11"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="pageChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Log",
  data() {
    return {
      //养老院名称
      careHome: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).careHomeName : '',
      //日志信息
      log: {},
      logList: [],
      //分页相关
      currentPage: 1,
      pageSize: 5,
      total: 0,
      //搜索关键词
      keyword: '',
      searchMode: 'desc_function'
    }
  },
  methods: {
    //加载日志信息
    load() {
      //相关数据获取
      this.request.get('/api-log/query', {
        params: {
          name: this.careHome
        }
      }).then(res => {
        if (res.code === '200') {
          //获取成功
          this.log = res.data
          this.getCharts()
        } else {
          this.$notify({
            type: 'error',
            message: res.msg,
            title: '日志信息获取失败'
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          message: err,
          title: '日志信息获取失败'
        })
      })
    },
    //创建图表
    getCharts() {
      //图表一
      this.$echarts.init(this.$refs.chart1).setOption({
        tooltip: {
          trigger: 'item',
          formatter: "<span style='font-weight: bold'>{b}</span> <br/>{a}: {c} ({d}%)",
          position: 'top',
          confine: true
        },
        legend: {
          data: Object.keys(this.log.apiDistribution),
          textStyle: {
            color: ' ',
            fontWeight: 'bold'
          },
          itemGap: 15,
          orient: 'vertical',
          top: 0,
          left: 0
        },
        series: [
          {
            name: "接口调用次数",
            type: "pie",
            center: ['65%', '45%'],
            radius: ['50%', '80%'],
            data: Object.keys(this.log.apiDistribution).map((key) => ({
              value: this.log.apiDistribution[key],
              name: key,
              labelLine: {
                position: 'inner',
                show: false,
              },
              label: {
                show: false,
              },
            })),
            itemStyle: {
              borderWidth: '1',
              borderColor: '#000',
            },
          },
        ],
      })
      //图表二
      this.$echarts.init(this.$refs.chart2).setOption({
        tooltip: {
          trigger: 'item',
          formatter: "<span style='font-weight: bold'>{b}</span> <br/>{a}: {c}",
          position: 'top',
          confine: true
        },
        xAxis: {
          data: Object.keys(this.log.apiTimesTrend).reverse(),
        },
        yAxis: {},
        series: [
          {
            name: "日接口调用数",
            type: "line",
            data: Object.values(this.log.apiTimesTrend).reverse(),
          },
        ],
      })
    },
    //换页
    pageChange(pageNum) {
      this.currentPage = pageNum
      this.search()
    },
    //搜索
    search() {
      //日志记录获取
      this.request.get('/api-log/search', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.keyword,
          type: this.searchMode,
          name: this.careHome
        }
      }).then(res => {
        if (res.code === '200') {
          //成功
          this.logList = res.data.records
          //将字符串属性转换为Long类型
          this.total = parseInt(res.data.total)
        } else {
          this.$notify({
            type: 'error',
            title: '获取日志记录失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '获取日志记录失败',
          message: err
        })
      })
    },
    //修改搜索方式
    handleClick(command) {
      this.searchMode = command
    },
    //导出记录
    exportRecords() {
      window.location.href = 'https://' + serverIp + '/api-log/export/' + this.careHome
    }
  },
  mounted() {
    this.load()
    this.search()
    //修改popper的所在位置
    this.$refs.here.appendChild(
        this.$refs.dropdown.popperElm
    )
  },
  computed: {
    //根据关键词类型显示按钮提示文字和图标
    btnWord() {
      switch (this.searchMode) {
        case 'desc_function':
          return '根据接口描述搜索'
        case 'user_id':
          return '根据调用用户搜索'
        case 'create_date':
          return '根据调用日期搜索'
        default:
          return '搜索'
      }
    }
  },
}
</script>

<style scoped>

/*card*/
>>> .el-card__header {
  border-color: var(--deepText);
}

.box-card:hover {
  background-color: var(--hover);
}

.card {
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
}

/*文字*/
.sText {
  font-size: 13px;
  color: var(--lightText);
}

.lText {
  font-size: 24px;
  color: var(--deepText);
}

.mText {
  font-size: 18px;
  color: var(--deepText);
}

/*滚动条*/
::-webkit-scrollbar {
  overflow: auto;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--th);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--lightText);
}

/*表格样式*/
/*表头背景*/
>>> .el-table .cell {
  height: 20px;
}

>>> .el-table th {
  background-color: var(--lightBg) !important;
}

/*表头文字*/
>>> .el-table thead {
  color: var(--th)
}

/*背景*/
>>> .el-table tr {
  background-color: var(--lightBg);
  color: var(--deepText);
  font-weight: normal;
}

/*行间线*/
>>> .el-table td, .building-top .el-table th.is-leaf {
  border-bottom: 0 !important;
}

/*表格末尾*/
>>> .el-table::before {
  border-bottom: 0;
  height: 0;
}

>>> .el-table, .el-table__expanded-cell {
  background-color: var(--lightBg) !important;
}

/*鼠标悬浮*/
>>> .el-table tbody tr:hover > td {
  background-color: var(--hover) !important;
}

/*操作列样式*/
>>> td.cellClass .cell {
  height: 34px !important;
}

.specialCard:hover {
  background-color: var(--lightBg);
}

/*分页管理器样式*/
>>> .btn-quicknext, >>> .btn-quickprev, >>> .btn-next, >>> .btn-prev, >>> .number {
  color: var(--deepText) !important;
  background-color: var(--deepBg) !important;
}

>>> .btn-quicknext:hover, >>> .btn-quickprev:hover, >>> .btn-next:hover, >>> .btn-prev:hover, >>> .number:hover {
  background-color: var(--hover) !important;
}

>>> .active {
  background-color: var(--btn) !important;
  color: var(--btnText) !important;
}

>>> .active:hover {
  background-color: var(--btnActive) !important;
}

/*搜索按钮*/
>>> .el-button--default {
  font-size: 13px;
  font-weight: bold;
  background-color: var(--btn);
  color: var(--deepText);
  border: none;
  transition: 0.2s;
}

>>> .el-button--default:hover {
  background-color: var(--btnActive);
}

>>> .el-button--default::before {
  display: none;
}

/*下拉框样式*/
>>> .el-dropdown__caret-button {
  font-size: 13px;
  font-weight: bold;
  margin-left: 2px !important;
  color: var(--btnText);
}

>>> .el-dropdown-menu {
  background-color: var(--inputBg) !important;
  padding: 0;
}

>>> .popper__arrow, >>> .popper__arrow::after {
  border-bottom-color: var(--inputBg) !important;
  border-top-color: var(--inputBg) !important;
}

>>> .el-dropdown-menu__item {
  color: var(--deepText);
  font-weight: bold;
  padding: 10px 30px;
  background-color: var(--inputBg);
}

>>> .el-dropdown-menu__item:hover {
  background-color: var(--hover);
  color: var(--deepText);
}

>>> .el-dropdown > .el-button-group > .el-button:not(:last-child) {
  width: 148px;
}

/*输入框样式*/
.input {
  margin-right: 20px;
  width: 300px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

>>> .el-input__inner {
  color: var(--deepText);
  background-color: var(--inputBg);
  border: solid 1px var(--inputBorder);
  border-radius: 5px;
}

>>> .el-date-editor .el-input__inner::placeholder {
  color: var(--lightText);
  padding-left: 10px;
}

>>> .el-input__icon {
  color: var(--deepText);
}

/*导出按钮*/
.export {
  color: var(--deepText);
  cursor: pointer;
  transition: 0.2s;
}

.export:hover {
  color: var(--btn);
}
</style>